<template>
  <div class="content-box">
    <el-row v-if="module === 'civiliz'">
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">单据名称：</span>
        <span class="l-content text--info subtext">{{ billName }} </span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">单据编号：</span>
        <span class="l-content text--info subtext">{{ billNum }}</span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">单据类型：</span>
        <span class="l-content text--info subtext">{{
          formatterStatusType(baseInfo?.flowMinType)
        }}</span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">所属项目：</span>
        <span class="l-content text--info subtext">
          {{ checkInfoData?.projectName }}
        </span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">所属合同：</span>
        <span class="l-content text--info subtext">
          {{ checkInfoData?.sectionName }}
        </span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">任务分部：</span>
        <span class="l-content text--info subtext">
          {{ checkInfoData?.atypeName }}
        </span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">任务分项：</span>
        <span class="l-content text--info subtext">
          {{ checkInfoData?.a1TypeName }}
        </span>
      </el-col>
    </el-row>

    <el-row v-else>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">单据名称：</span>
        <span class="l-content text--info subtext">{{ billName }} </span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">单据编号：</span>
        <span class="l-content text--info subtext">{{ billNum }}</span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">单据类型：</span>
        <span class="l-content text--info subtext">{{
          formatterStatusType(baseInfo?.flowMinType)
        }}</span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">所属项目：</span>
        <span class="l-content text--info subtext">
          {{ checkInfoData?.projectName }}
        </span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">所属合同：</span>
        <span class="l-content text--info subtext">
          {{ checkInfoData?.sectionName }}
        </span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">所属单体：</span>
        <span class="l-content text--info subtext">
          {{ checkInfoData?.monomerName }}
        </span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">工程类型：</span>
        <span class="l-content text--info subtext">
          {{ checkInfoData?.atypeName }}
        </span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">子工程类型：</span>
        <span class="l-content text--info subtext">
          {{ checkInfoData?.a1TypeName }}
        </span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">分部：</span>
        <span class="l-content text--info subtext">
          {{ checkInfoData?.btypeName }}
        </span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">子分部：</span>
        <span class="l-content text--info subtext">
          {{ checkInfoData?.ctypeName }}
        </span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">分项：</span>
        <span class="l-content text--info subtext">
          {{ checkInfoData?.dtypeName }}
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, watch, ref } from "vue";
import { useRoute } from "vue-router";
import { checkInfo, civilizRecordInfo } from "/@/api/construction";
import { BillStatusMap } from "../../types";
const props = defineProps({
  basicInfoData: {
    type: Object,
    default: () => {}
  },
  module: {
    type: String,
    required: true,
    default: "quality"
  },
  billNum: {
    type: String,
    default: "-"
  }
});

let baseInfo = ref(null);
const checkInfoData = ref({});
const route = useRoute();
let billName = ref(route.query.billName || "");
// 获取工程质量详情
const checkDetail = async newVal => {
  try {
    console.log(123453465346343463636, props.module, newVal);
    const id =
      props.module === "civiliz" ? newVal.civilizId : newVal.qtyCheckId;
    if (id) {
      const checkInfoApi =
        props.module === "civiliz" ? civilizRecordInfo : checkInfo;
      let postData = { id };
      const { code, data } = await checkInfoApi(postData);
      if (code === 200) {
        checkInfoData.value = data;
      }
    }
  } catch (err) {
    console.log(err);
  }
};

// 格式化类型
const formatterStatusType = row => {
  return row && BillStatusMap.get(row);
};

watch(
  () => props.basicInfoData,
  newVal => {
    if (newVal) {
      baseInfo.value = newVal;
      checkDetail(newVal);
    }
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<style lang="scss" scoped>
// .divider {
//   margin-bottom: 10px;
//   // border-left: 3px solid #409eff;
//   text-indent: 8px;
// }
// .content {
//   width: 100%;
//   margin-bottom: 20px;
// }

// :deep .el-select {
//   width: 100%;
// }
// :deep .el-date-editor {
//   width: 100%;
// }
</style>
